<template>
  <view class="content">
          <!-- 2.0.19支持autoBack，默认为false -->
            <view class="topNav">
              <u-navbar
                  title="搜索"
                  @leftClick="leftClick"
                  :autoBack="true"
              >
              <!-- #ifdef APP || H5 -->
                <view
                    class="u-nav-slot"
                    slot="center"
                >
                    <u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="true" actionText="搜索"
                    @search="getSearchContext"
                    ></u-search>
                </view>
              <!-- #endif -->

              </u-navbar>              
            </view>
            <view class="main">
              <!-- #ifdef MP-WEIXIN -->
              <view class="search">
                  <u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="true" actionText="搜索"
                    @search="getSearchContext"
                  ></u-search>
              </view>            
              <!-- #endif -->     
              <view class="historySearch">
                <view class="bigTitle">历史搜索</view>
                <view class="historyList">
                  <view class="history-item" v-for="(item,index) in historySearchList" :key="index">
                    {{item}}
                  </view>
                </view>
              </view>
              <view class="hotSearch">
                <view class="hotSearch-list">
                  <view class="hotSearch-item">
                    123
                  </view>
                </view>
              </view>
            </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword:'',
        historySearchList:  []
      }
    },
    components:{
      
    },
    onReady() {
      // JSON.parse(uni.getStorageSync('historyData')) ||
      if(uni.getStorageSync('historyData')) {
        this.historySearchList = JSON.parse(uni.getStorageSync('historyData'))
      }
      
    },
    methods: {
        leftClick() {
            console.log('leftClick');
        },
        // 获取搜索的内容
        getSearchContext() {
          var indexId = this.historySearchList.indexOf(this.keyword)
          if(indexId == -1) {
              this.historySearchList.unshift(this.keyword)
          }else {
            // 不添加，但是要把重复的往前移位
            this.historySearchList.unshift(this.historySearchList.splice(indexId,1)[0])
          }
          uni.setStorageSync('historyData',JSON.stringify(this.historySearchList))
        }
    }
  }
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search {
  padding-top: 64px;
}
.main {
  padding: 0 30rpx;
  width: 100%;
  box-sizing: border-box;
  .historySearch {
    /* #ifdef APP || H5 */
    padding-top: 44px;
    /* #endif */
    .bigTitle {
      font-size: 32rpx;
      line-height: 44rpx;
      margin-top: 8rpx;
      font-weight: bold;
    }
    .historyList {
      display: flex;
      flex-wrap: wrap;
      margin-top: 8rpx;
      .history-item {
        padding: 12rpx 10rpx;
        margin: 10rpx 12rpx;
        font-size: 28rpx;
        background-color: rgba(240, 240, 240, 0.8);
      }
    }
  }
}
</style>
